<template>
  <div id="main">
    <BaseReturnHomePage/>
    <div id="loginBox" class="animate__rotateInDownLeft animate__animated">
      <!--      logo区域  -->
      <div id="logo">
        <img height="56px" src="https://www.giaott.com/images/2022/09/28/jILo7.png" alt="">
      </div>
      <!--      注册账号-->
      <div style="display: flex;justify-content: space-between;font-size: 20px;margin: 45px 29px;">
        <span>注册</span><span>已经有账号?<router-link to="/login">&nbsp立刻登录!</router-link></span>
      </div>
      <!--      账户名密码-->
      <div id="contentPanel" style="padding: 0 27px;width:458px">
        <el-input v-model="username" prefix-icon="el-icon-message" placeholder="    请输入用户名/电子邮箱"/>
        <el-input v-model="password" prefix-icon="el-icon-lock" placeholder="      请输入密码" style="margin-top: 25px"/>
        <el-input v-model="verPassword" prefix-icon="el-icon-lock" placeholder="      确认密码" style="margin-top: 25px"/>
        <div id="robotVer" style="text-align: center;background-color: rgb(245, 245, 245)">
          <img src="../assets/icon/reg.gif" alt="注册">
          点击进行人机验证
        </div>
        <!--        登录按钮-->
        <div>
          <el-button type="success" plain style="font-size: 20px;height:50px;width:100%">登录</el-button>
        </div>
        <!--        第三方账号登录-->
        <div style="display: flex;justify-content: space-between;align-items: center">
          <span>简单注册快人一步</span>
          <img height="30" src="../assets/icon/彩色/QQ.png" alt="qq登录">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
#robotVer {
  text-align: center;
  font-size: 14px;
  color: #666;
  line-height: 38px;
  background-color: #eee;
  background-image: -o-linear-gradient(top, #fff 0, #f3f3f3 100%);
  background-image: linear-gradient(180deg, #fff, #f3f3f3);
  border: 1px solid #dcdfe6;
  opacity: 0.4;
  border-radius: 2px;
  user-select: none;
}
#robotVer:hover{
  opacity: 0.9;
}

#rememberMe {
  display: flex;
  justify-content: space-between;
}

#contentPanel div {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-top: 25px;
  font-size: 19px;

}

#logo img {
  margin-top: 31px;
  margin-left: 140px;
}

#loginBox {
  position: absolute;
  top: 8%;
  left: 37%;
  width: 508px;
  height: 704px;

  background-color: white;
  box-shadow: 2px 2px 3px #aaaaaa;
  border-radius: 15px;
}

#main {
  position: relative;
  height: 100%;
  width: 100%;
  background-image: url("../assets/bgi/login.jpg");
  background-size: cover;
  background-attachment: fixed;
}

</style>
<script>
import BaseReturnHomePage from "@//components/base/BaseReturnHomePage";

export default {
  name: "register",
  components: {BaseReturnHomePage},
  data() {
    return {
      rememberMe: '',
      username:'',
      password:'',
      verPassword:''
    }
  }
}
</script>

